import React, { memo } from "react";
import { Card } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import UserCardWrapper from "./style";
import UserInfoBox from "../UserInfoBox";

const UserCard = memo((props) => {
  const navigate = useNavigate();
  let list = props.userList;

  function handleChat(v) {
    navigate(`/chat?id=${v._id}&user=${v.user}`);
  }

  return (
    <UserCardWrapper>
      {list.map((v) => {
        let avatar = "";
        try {
          avatar = require(`../../components/img/${v.avatar}.png`);
        } catch (error) {
          // 如果图片出错，使用默认的头像
          avatar = require(`../../components/img/default.png`);
        }

        return (
          <div key={v._id} className="cardCon">
            <Card
              style={{ marginBottom: "9px", border: "1px solid #eee" }}
              bodyStyle={{ minHeight: "40px" }}
              onClick={() => {
                handleChat(v);
              }}
              title={
                <div className="titleContainer">
                  <img
                    src={avatar}
                    alt=""
                    className="imgCls"
                    style={{ width: 50 }}
                  />
                  <div className="username"> {v.user}</div>
                  <div className="rightTitle">{v.title}</div>
                </div>
              }
            >
              <div>
                <UserInfoBox user={v} marginTopAndBottom={5} />
              </div>
            </Card>
          </div>
        );
      })}
    </UserCardWrapper>
  );
});
export default UserCard;
